<template>
  <div id="editor" ref="editor" class="text-editor"></div>
</template>

<script>
import { uploadImg } from '@/service/course'
import E from 'wangeditor'
export default {
  props: {
    value: null
  },
  data () {
    return {
      editor: null,
      isLoad: false
    }
  },
  // created () {
  //   this.$nextTick(() => {
  //     })
  // },
  mounted () {
    this.initEditor()
  },
  watch: {
    value (newValue) {
      if (!this.isLoad) {
        this.editor.txt.html(newValue)
        this.isLoad = true
      }
    }
  },
  methods: {
    initEditor () {
      const editor = new E(this.$refs.editor)
      this.editor = editor
      // 配置 onchange 回调函数
      editor.config.onchange = newHtml => {
        // console.log('change 之后最新的 html', newHtml)
        this.$emit('input', newHtml)
      }
      // 自定义上传函数
      editor.config.customUploadImg = async (resultFiles, insertImgFn) => {
        // resultFiles 是 input 中选中的文件列表
        let imgUrl = ''
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        for (const file of resultFiles) {
          imgUrl = await this.customUpload(file)
          // 上传图片，返回结果，将图片插入到编辑器中
          insertImgFn(imgUrl)
        }
      }
      editor.txt.html(this.value || '')
      editor.create()
    },
    //   自定义图片上传函数
    async customUpload (file) {
      // console.log(option)
      const fd = new FormData()
      fd.append('file', file)
      const { data } = await uploadImg(fd)
      //   console.log(data)
      if (data.code === '000000') {
        return data.data.name
      }
    }
  }
}
</script>

<style></style>
